<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../wh2114/vuedemo/lib/vue.js"></script>
  </head>
  <body>
    <div id="add">
      <p>{{msg}}</p>
      <h1>{{txt}}</h1>
      <h2>{{title}}</h2>
      <!-- <h3 v-html="title"></h3> -->
      <h2 class="count" v-once v-on:click="chengeCount">count == {{count }}</h2>
      <div v-if="flag">
        <div v-bind:data-title="title" v-bind:data-count="count">{{title}}</div>
        <img v-bind:src="imgSrc" style="width: 200px; height: 200px" alt="" />
      </div>
      <div class="else" v-else>v-else 和 v-if 配合使用</div>
      <button v-on:click="flag=!flag">点击切换 {{flag }}</button>
      <p><input type="text" v-bind:value="msg" v-on:click="change" /></p>
      <p>
        <input type="text" v-model="msg" />
      </p>
      <p>商品单价: <input type="text" v-model="good.price" /></p>
      <p>商品数量 : <input type="text" v-model="good.num" /></p>
      <p>购买总结: {{good.price * good.num}}</p>

      <div v-html="tag">
        <!-- {{tag}} -->
      </div>
      <div v-text="tag"></div>
    </div>
    <script>
      const vm = new Vue({
        el: "#add",

        data: {
          msg: "work hard for you111",
          count: 2022,
          txt: "Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统",
          title: "真简单",
          imgSrc: "http://47.104.209.44/base/imgs/1.jpg",
          flag: !!0,
          good: {
            price: 127,
            num: 14,
          },
          tag: "<h1>2114-越努力越幸运</h1>",
        },
        methods: {
          chengeCount() {
            this.count = this.count + 10;
          },
          change(e) {
            console.log(e);
            this.msg = e.target.value;
          },
        },
      });
    </script>
     <!-- Vue 通过实例化 Vue 这个构造函数 实现 vue 框架的所有功能 
    vm  得到的实例化对象  
    el  属性  document.querySelector(el);   说明Vue的作用范围 
    会将app 里面所有的 DOM 渲染 成 虚拟DOM(?)  存储在 内存中 
    data  Vue 需要初始化的数据  最常见的属性    
    {{ }}  最普遍的模板标记标签  双大括号语法  插值表达式  
    核心功能  允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    声明式  直接在 html  书写    a
    编程式  直接在 javascript 书写  location.href   
    
    响应式  reaction  数据被修改之后  页面里面随之跟着里面更新 (vue提供自动响应式系统)
    
    强大的指令功能  v-   代替你进行DOM 操作  Attribute  
    v-bind   绑定vue标签 或者 组件的 属性 attribute v-bind:src v-bind:title  绑定动态的属性 
    静态属性  永远不改变 不是变量
    动态属性  接收是变量  (v-bind)  70%
    v-if/v-show  条件渲染  控制显示隐藏  90% 
    v-on 绑定事件  v-on:click  v-on:change v-on:keydown  100% 
    v-for   循环 循环对象 或数组   90%
    v-model  只能绑定在输入框  实现数据双向绑定 (view 视图 + model 数据模型)   90%  
    当你修改 页面的时候  v-model 自动去更新数据层 
    当你修改 数据的时候  v-model 自动去更新视图层 
    
    v-text   textContent   只接受文本
    v-html   innerHTML     文本和html标签 
    v-once   read-only 
    methods vue 属性  接收方法 
    
    组件化 组件系统是 Vue 的另一个重要概念 
    允许我们使用小型、独立和通常可复用的组件构建大型应用 
    
    封装 类似 Vue 实现数据的双向绑定  双大括号语法 
  </body>
</html>
